<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>titel</title>
        <style>
            html,body {
                margin: 0;
                padding: 0;
            }

            body {
                display: grid;
                grid-template-rows: 60px 1fr;
                grid-template-columns: 240px 1fr;
                height: 100vh;
                grid-template-areas: 
                "header header"
                "left content"
                "left footer";
            }

            .header {
                grid-area: header;
                background-color: #039be5;
            }
            .left {
                grid-area: left;
                background-color: aliceblue;
            }
            .content {
                grid-area: content;
                background-color: #4fc3f7;
            }
            .footer {
                grid-area: footer;
                background-color: #039be5;
            }

            .header,
            .footer,
            .left,
            .content {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
        <div class="header">Header</div>
        <div class="left">left</div>
        <div class="content">Content</div>
        <div class="footer">Footer</div>
    </body>
</html>